<template>
  <section class="wrapper">
    <section class="top"></section>
    <section class="list">
      <section
        class="list-item"
        v-for="item in list" :key="item.id"
        @click="$router.push({name: 'MessageDetails', params: {id: item.id}})"
      >
        <section class="title">
          {{ item.title }}
        </section>
        <section class="time">
          <img src="../assets/images/time.png" alt="">
          {{ item.createTime | replace }}
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import {getNewsList} from '@/api/match'
export default {
  name: 'Message',
  data: () => ({
    statusText: {
      1: '报名审核中',
      2: '报名成功'
    },
		userInfo: {},
    list: []
  }),
  created() {
  	this.userInfo = this.$storage.getData('userInfo')
    getNewsList({
	    eq: {
		    userId: this.userInfo.id
	    },
	    in: {attrName: 'model_name', data: ['组队消息', '用户消息']},
	    order:{
		    attrName:['create_time'],
		    type:'desc'
	    }
    }).then(res => {
      console.log(res)
      this.list = res
    })
  }
}
</script>
<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top {
    width: 10rem;
    height: 2.267rem;
    background-image: linear-gradient(90deg,
    #2e9cff 0%,
    #1f7eff 100%),
    linear-gradient(
      #000000,
      #000000);
    background-blend-mode: normal,
    normal;
  }

  .list {
    transform: translateY(-1.2rem);
    margin: 0 0.4rem;

    .list-item {
      padding: 0.267rem;
      margin-bottom: 0.267rem;
      background-color: #ffffff;
      box-shadow: 0rem 0rem 0.2rem 0.04rem rgba(0, 0, 0, 0.02);
      border-radius: 0.133rem;

      .title {
        margin-bottom: 0.533rem;
        .flex;
        justify-content: flex-start;
        font-size: 0.373rem;
        font-weight: 500;
        color: #000000;
      }

      .time {
        .flex;
        justify-content: flex-start;
        font-size: 0.32rem;
        color: #999;

        img {
          margin-right: 0.133rem;
        }
      }
    }
  }
</style>
